<template>
  <view class="newslist-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input v-model="searchKeyword" class="search-input" placeholder="请输入新闻标题关键词" />
      <button class="search-btn" @click="handleSearch">搜索</button>
      <button class="reset-btn" @click="handleReset">重置</button>
    </view>
    <!-- 分类栏 -->
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-list">
        <view 
          class="category-item" 
          v-for="item in newsCategories" 
          :key="item.id"
          :class="{'category-active': currentCategoryId === item.id}"
          @tap="changeCategory(item.id)"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
    <!-- 新闻列表 -->
    <view class="news-list">
      <view class="news-item" v-for="item in filteredNewsList" :key="item.id" @click="goToNewsDetail(item.id)">
        <image :src="item.cover_url" mode="aspectFill" class="news-image"/>
        <view class="news-content">
          <text class="news-title">{{ item.title }}</text>
          <text class="news-desc">{{ item.content }}</text>
        </view>
      </view>
      <view v-if="filteredNewsList.length === 0" class="no-news">暂无新闻</view>
      <view style="height: 120rpx;"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { request } from '../../utiles/request';

const newsCategories = ref<{id:number, name:string}[]>([]);
const currentCategoryId = ref<number|null>(null);
const allNewsList = ref<any[]>([]);
const searchKeyword = ref('');

// 获取新闻分类
const getNewsCategories = () => {
  request({
    url: '/admin/api/newsclass/list',
    method: 'GET'
  }).then(res => {
    if (res.data && res.data.code === 200) {
      newsCategories.value = res.data.data;
      if (newsCategories.value.length > 0) {
        currentCategoryId.value = newsCategories.value[0].id;
      }
    }
  });
};

// 获取所有新闻
const getAllNews = () => {
  request({
    url: '/admin/api/news/list',
    method: 'GET',
    data: {}
  }).then(res => {
    if (res.data && res.data.code === 200) {
      allNewsList.value = res.data.data;
    }
  });
};

// 切换分类
const changeCategory = (id: number) => {
  currentCategoryId.value = id;
};

// 搜索
const handleSearch = () => {
  // 只需触发filteredNewsList的计算属性刷新
};

// 重置
const handleReset = () => {
  searchKeyword.value = '';
  if (newsCategories.value.length > 0) {
    currentCategoryId.value = newsCategories.value[0].id;
  }
};

// 过滤后的新闻列表
const filteredNewsList = computed(() => {
  let list = allNewsList.value;
  if (currentCategoryId.value) {
    list = list.filter(item => item.category_id === currentCategoryId.value);
  }
  if (searchKeyword.value) {
    list = list.filter(item => item.title.includes(searchKeyword.value));
  }
  return list;
});

const goToNewsDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/newsDetail/newsDetail?id=${id}`
  });
};

onMounted(() => {
  getNewsCategories();
  getAllNews();
});
</script>

<style>
.newslist-container {
  min-height: 100vh;
  background: #f7fafd;
  padding-bottom: 80rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
  gap: 16rpx;
  margin-bottom: 24rpx;
}
.search-input {
  flex: 1;
  height: 64rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 32rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  background: #f5f7fa;
}
.search-btn, .reset-btn {
  height: 64rpx;
  padding: 0 32rpx;
  border-radius: 32rpx;
  border: none;
  font-size: 28rpx;
  color: #fff;
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
}
.reset-btn {
  background: #bdbdbd;
  color: #fff;
}
.category-scroll {
  margin: 0 0 32rpx 0;
  padding: 0 24rpx;
  white-space: nowrap;
}
.category-list {
  display: inline-flex;
  gap: 30rpx;
}
.category-item {
  padding: 10rpx 30rpx;
  font-size: 14px;
  color: #666666;
  background-color: #F5F5F5;
  border-radius: 30rpx;
}
.category-active {
  color: #FFFFFF;
  background-color: #1976D2;
}
.news-list {
  padding: 0 24rpx;
}
.news-item {
  display: flex;
  gap: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  margin-top: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.04);
  overflow: hidden;
  padding: 24rpx 0;
}
.news-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
}
.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-title {
  font-size: 30rpx;
  color: #1976D2;
  font-weight: bold;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.no-news {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 40rpx;
}
</style>